<template>
	<view class="parameter-config-container">
		<!-- 基础参数卡片 -->
		<view class="parameter-card">
			<view class="card-header">
				<text class="card-title">基础参数</text>
			</view>
			<view class="parameter-list">
				<view class="parameter-item">
					<text class="parameter-key">纯电续航里程</text>
					<text class="parameter-value">{{ paramConfig.pureElectricRange }}</text>
				</view>
				<view class="parameter-item">
					<text class="parameter-key">车辆级别</text>
					<text class="parameter-value">{{ paramConfig.vehicleLevel }}</text>
				</view>
				<view class="parameter-item">
					<text class="parameter-key">厂商</text>
					<text class="parameter-value">{{ paramConfig.manufacturer }}</text>
				</view>
				<view class="parameter-item">
					<text class="parameter-key">车身结构</text>
					<text class="parameter-value">{{ paramConfig.bodyStructure }}</text>
				</view>
				<view class="parameter-item">
					<text class="parameter-key">车身结构简述</text>
					<text class="parameter-value">{{ paramConfig.bodyStructureDesc }}</text>
				</view>
				<view class="parameter-item">
					<text class="parameter-key">厂商指导价</text>
					<text class="parameter-value">{{ paramConfig.manufacturerGuidePrice }}</text>
				</view>
				<view class="parameter-item">
					<text class="parameter-key">车型</text>
					<text class="parameter-value">{{ paramConfig.model }}</text>
				</view>
				<view class="parameter-item">
					<text class="parameter-key">车系</text>
					<text class="parameter-value">{{ paramConfig.carSeries }}</text>
				</view>
				<view class="parameter-item">
					<text class="parameter-key">发动机</text>
					<text class="parameter-value">{{ paramConfig.engine }}</text>
				</view>
				<view class="parameter-item">
					<text class="parameter-key">国别</text>
					<text class="parameter-value">{{ paramConfig.countryOfOrigin }}</text>
				</view>
				<view class="parameter-item">
					<text class="parameter-key">能源类型</text>
					<text class="parameter-value">{{ paramConfig.energyType }}</text>
				</view>
			</view>
		</view>
		
		<!-- 底部咨询卡片 -->
		<view class="consultation-card">
			<view class="disclaimer-text">
				<text class="disclaimer-line">因车企会对车辆不断优化,当前页面的部分信息可能与实际车辆</text>
				<text class="disclaimer-line">有所不同,详情以实车为准</text>
			</view>
			<view class="consultation-button" @click="showConsultPopup">
				<text class="button-text">免费咨询</text>
			</view>
		</view>
		
		<!-- 咨询弹框 -->
		<uni-popup ref="consultPopup" type="bottom" :mask-click="true" :z-index="2000" @maskClick="closeConsultPopup">
			<view class="consult-modal">
				<!-- 第一行：顾问信息 -->
				<view class="consult-header">
					<view class="consult-info">
						<text class="consult-title">利行租车顾问为您服务</text>
						<view class="service-features">
							<view class="feature-item">
								<image class="feature-icon" src="/static/images/pop_icon_checked@3x.png" mode="aspectFit"></image>
								<text class="feature-text">1对1答疑</text>
							</view>
							<view class="feature-item">
								<image class="feature-icon" src="/static/images/pop_icon_checked@3x.png" mode="aspectFit"></image>
								<text class="feature-text">车型推荐</text>
							</view>
							<view class="feature-item">
								<image class="feature-icon" src="/static/images/pop_icon_checked@3x.png" mode="aspectFit"></image>
								<text class="feature-text">优惠咨询</text>
							</view>
						</view>
					</view>
					<image class="consult-avatar" src="https://app-1306761403.cos.accelerate.myqcloud.com/06d400f0-3875-43a6-b8f9-3664a0e45f6b.png" mode="aspectFit"></image>
				</view>
				
				<!-- 第二行：输入卡片 -->
				<view class="consult-form-card">
					<!-- 手机号输入 -->
					<view class="phone-input-row">
						<text class="input-label">您的手机号</text>
						<view class="input-wrapper">
							<input class="phone-input" type="number" placeholder="请输入手机号" v-model="phoneNumber" />
							<uni-icons v-if="phoneNumber" type="closeempty" size="20" color="#999" @click="clearPhoneNumber"></uni-icons>
						</view>
					</view>
					
					<!-- 隐私说明 -->
					<text class="privacy-text">
						为了您的信息安全，手机号将以虚拟号的形式给到管家，详细规则查看
						<text class="privacy-link">《电话销售说明》</text>
					</text>
					
					<!-- 立即咨询按钮 -->
					<view class="consult-submit-button" @click="submitConsult">
						<text class="submit-button-text">立即咨询</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { getParamConfig, addPotentialClient } from '@/api/carInfo.js';

export default {
	name: 'ParameterConfig',
	data() {
		return {
			carId: '5', // 默认车辆ID
			paramConfig: {
				// 基础参数
				pureElectricRange: '400', // 纯电续航里程
				vehicleLevel: '紧凑型', // 车辆级别
				manufacturer: '上汽荣威', // 厂商
				bodyStructure: '5门5座两厢车', // 车身结构
				bodyStructureDesc: '5门5座两厢车', // 车身结构简述
				manufacturerGuidePrice: '137800', // 厂商指导价
				model: '2019款 Ei5网约版纯电动', // 车型
				carSeries: '轿车', // 车系
				engine: '纯电动0马力', // 发动机
				countryOfOrigin: '国产', // 国别
				energyType: '纯电动' // 能源类型
			},
			// 咨询弹窗相关
			showConsultModal: false,
			phoneNumber: ''
		}
	},
	onLoad(options) {
		console.log('parameter-config onLoad 被调用了', options);
		// 保存车辆ID参数
		if (options.carId) {
			this.carId = options.carId;
		}
		// 页面加载时调用接口
		this.fetchParamConfig();
	},
	onShow() {
		console.log('parameter-config onShow 被调用了');
		// 页面显示时也调用接口
		this.fetchParamConfig();
	},
	methods: {
		// 获取车辆参数配置
		fetchParamConfig() {
			console.log('fetchParamConfig 方法被调用了');
			
			const params = {
				carId: this.carId
			};
			
			console.log('调用参数配置接口参数:', params);
			
			getParamConfig(params).then(res => {
				console.log('参数配置接口返回数据:', res);
				
				// 处理接口返回的数据
				if (res && res.data) {
					// 格式化数值显示
					const formatNumber = (value, defaultValue = '0') => {
						if (value === null || value === undefined || value === 0) {
							return defaultValue;
						}
						return value.toString();
					};
					
					// 格式化字符串显示
					const formatString = (value, defaultValue = '暂无') => {
						if (!value || value === 'String') {
							return defaultValue;
						}
						return value;
					};
					
					// 更新参数配置数据
					this.paramConfig = {
						pureElectricRange: formatNumber(res.data.pureElectricRange, '400') + 'km',
						vehicleLevel: formatString(res.data.vehicleLevel, '紧凑型'),
						manufacturer: formatString(res.data.manufacturer, '上汽荣威'),
						bodyStructure: formatString(res.data.bodyStructure, '5门5座两厢车'),
						bodyStructureDesc: formatString(res.data.bodyStructureDesc, '5门5座两厢车'),
						manufacturerGuidePrice: '¥' + formatNumber(res.data.manufacturerGuidePrice, '137800'),
						model: formatString(res.data.model, '2019款 Ei5网约版纯电动'),
						carSeries: formatString(res.data.carSeries, '轿车'),
						engine: formatString(res.data.engine, '纯电动0马力'),
						countryOfOrigin: formatString(res.data.countryOfOrigin, '国产'),
						energyType: '纯电动' // 这个字段在接口中没有，保持默认值
					};
					console.log('处理后的参数配置:', this.paramConfig);
				} else {
					console.log('参数配置接口返回数据格式异常:', res);
					// 保持原有默认数据
				}
			}).catch(error => {
				console.error('获取参数配置失败:', error);
				// 保持原有默认数据
			});
		},
		// 显示咨询弹框
		showConsultPopup() {
			this.showConsultModal = true;
			this.$refs.consultPopup.open();
		},
		
		// 关闭咨询弹框
		closeConsultPopup() {
			this.showConsultModal = false;
			this.$refs.consultPopup.close();
		},
		
		// 清空手机号
		clearPhoneNumber() {
			this.phoneNumber = '';
		},
		
		// 提交咨询
		submitConsult() {
			if (!this.phoneNumber) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				});
				return;
			}
			
			// 验证手机号格式
			const phoneRegex = /^1[3-9]\d{9}$/;
			if (!phoneRegex.test(this.phoneNumber)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return;
			}
			
			// 构建提交数据
			const submitData = {
				phoneNumber: this.phoneNumber,
				carModel: this.paramConfig.model || '参数咨询' // 使用当前车型或默认值
			};
			
			console.log('提交咨询数据:', submitData);
			
			// 调用接口
			addPotentialClient(submitData).then(res => {
				console.log('咨询提交成功:', res);
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				});
				
				// 清空手机号并关闭弹框
				this.phoneNumber = '';
				this.closeConsultPopup();
			}).catch(error => {
				console.error('提交咨询失败:', error);
				uni.showToast({
					title: '提交失败，请重试',
					icon: 'none'
				});
			});
		}
	}
}
</script>

<style scoped>
.parameter-config-container {
	min-height: 100vh;
	background-color: #f2f3f7;
	padding: 0;
}

.parameter-card {
	background-color: #fff;
	margin: 0;
	border-radius: 0;
}

.card-header {
	padding: 30rpx 30rpx 20rpx;
	border-bottom: 1rpx solid #e0e0e0;
}

.card-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.parameter-list {
	padding: 0;
}

.parameter-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #e0e0e0;
}

.parameter-item:last-child {
	border-bottom: none;
}

.parameter-key {
	font-size: 28rpx;
	color: #666;
	flex: 1;
}

.parameter-value {
	font-size: 28rpx;
	color: #666;
	text-align: right;
	flex: 1;
}

.consultation-card {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 30rpx;
	border-radius: 0;
	box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.disclaimer-text {
	margin-bottom: 30rpx;
}

.disclaimer-line {
	display: block;
	font-size: 24rpx;
	color: #999;
	line-height: 1.5;
	margin-bottom: 10rpx;
}

.consultation-button {
	width: 100%;
	height: 80rpx;
	background-color: #007aff;
	border-radius: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.button-text {
	font-size: 32rpx;
	color: #fff;
	font-weight: 500;
}

/* 咨询弹框样式 */
.consult-modal {
	background: linear-gradient(to right, #01DFAA, #13B09F);
	border-radius: 20rpx 20rpx 0 0;
	padding: 0;
	z-index: 2000;
}

.consult-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 10rpx 30rpx 0rpx 30rpx;
}

.consult-info {
	flex: 1;
	margin-right: 20rpx;
	margin-top: 30rpx;
}

.consult-title {
	color: #015B49;
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	display: block;
}

.service-features {
	display: flex;
	flex-direction: row;
	gap: 20rpx;
}

.feature-item {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.feature-icon {
	width: 24rpx;
	height: 24rpx;
}

.feature-text {
	color: #015B49;
	font-size: 28rpx;
}

.consult-avatar {
	width: 170rpx;
	height: 170rpx;
	flex-shrink: 0;
}

.consult-form-card {
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
}

.phone-input-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20rpx;
	background-color: #f5f6fc;
	border-radius: 50rpx;
	padding: 20rpx 30rpx;
}

.input-label {
	color: #333;
	font-size: 28rpx;
	font-weight: 500;
}

.input-wrapper {
	display: flex;
	align-items: center;
	flex: 1;
	margin-left: 20rpx;
}

.input-wrapper .uni-icons {
	padding: 10rpx;
	margin: -10rpx;
}

.phone-input {
	flex: 1;
	padding: 0;
	font-size: 28rpx;
	color: #333;
	background: transparent;
	border: none;
}

.privacy-text {
	color: #666;
	font-size: 24rpx;
	line-height: 1.5;
	margin-bottom: 10rpx;
}

.privacy-link {
	color: #01DFAA;
	text-decoration: underline;
}

.consult-submit-button {
	background: linear-gradient(to right, #01DFAA, #05D1BB);
	border-radius: 50rpx;
	padding: 24rpx 0;
	text-align: center;
	margin-top: 20rpx;
}

.submit-button-text {
	color: #fff;
	font-size: 32rpx;
	font-weight: 500;
}

/* 增加 uni-icons 的点击区域 */
.uni-icons {
	padding: 10rpx;
	margin: -10rpx;
	min-width: 40rpx;
	min-height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
